<template>
    <div>
                <!-- 面包屑区域 -->
    <el-breadcrumb v-if="!isLearnDialog" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">人在回路</el-breadcrumb-item>
        <el-breadcrumb-item>学习</el-breadcrumb-item>
        <el-breadcrumb-item>查看学习器</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <!-- 当前任务 -->
        <h3 v-if="!isLearnDialog">当前学习器</h3>
        <el-table :data="LearnerData" border stripe  style="width: 100%"
        :highlight-current-row="isLearnDialog" @current-change="clickCurrentChange">
          <el-table-column  label="序号" type="index"> </el-table-column>
          <el-table-column prop="learner_name" label="学习器名"> </el-table-column>
          <el-table-column prop="learner_type" label="学习器类型">
            <template slot-scope="scope">{{scope.row.learner_type | learnerTypeTrans}}</template>
          </el-table-column>
          <el-table-column prop="train_state" label="训练状态">
            <template slot-scope="scope">{{scope.row.train_state | trainTypeTrans}}</template>
          </el-table-column>
          <el-table-column label="操作" width="400" v-if="!isLearnDialog">
            <template slot-scope="scope">
              <el-button  size="mini" type="primary" @click="trainProgress(scope.row.task_id)">训练进度</el-button>
              <el-button size="mini" type="primary" @click="handleDownLoadPrediction(scope.row)">下载预测结果</el-button>
              <el-button size="mini" type="primary"  @click="handleDownLoadReport(scope.row)">下载预测报告</el-button>
              <el-button  size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row.learner_id)"></el-button>
            </template>
           </el-table-column>
        </el-table>
    </el-card>
        <!-- 查看进度条的对话框 -->
    <el-dialog title="查看学习器训练进度" :visible.sync="queryProgressVisible" width="30%">
      <el-progress type="circle" :percentage="progress*100"></el-progress>
    </el-dialog>
    </div>
</template>
<script>
import learnApi from './../../api/learn'
// 操作状态
const trainStatus = [
  { type: '0', name: '不进行训练' },
  { type: '1', name: '训练中' },
  { type: '2', name: '训练完成' },
  { type: '3', name: '训练失败' }
]
// 学习器类型
const learnerTypeOptions = [
  { type: 'Manual', name: '人工' },
  { type: 'Auto', name: '自动化' },
  { type: 'HML', name: '人在回路' }
]
export default {
  filters: {
    // 过滤器中this指向的不是vue实例，所以无法直接获取data中的数据
    learnerTypeTrans (type) {
      const obj = learnerTypeOptions.find(item => item.type === type)
      return obj ? obj.name : null
    },
    trainTypeTrans (type) {
      const obj = trainStatus.find(item => item.type === type)
      return obj ? obj.name : null
    }
  },
  props: {
    // 这里接受父组件传过来的数据，如果isDialog为true，则为弹窗
    isLearnDialog: Boolean
  },
  data () {
    return {
      // 人工特征工程列表
      LearnerData: [],
      // 特征工程操作状态
      trainStatus: [],
      learnerTypeOptions: [],
      // 查看操作进度对话框
      queryProgressVisible: false,
      progress: 0,
      progressStatus: ''
    }
  },
  created () {
    this.getLearnerInfo()
  },
  methods: {
    // 获取数据集信息
    getLearnerInfo () {
      learnApi.query().then(response => {
        // console.log(response)
        const resp = response.data
        if (resp.meta.code === 200) {
          this.$message.success('加载学习器成功')
          this.LearnerData = resp.data
        }
      })
    },
    // 查看分析任务进度
    trainProgress (rowId) {
      console.log(rowId)
      if (rowId) {
        this.queryProgressVisible = true
        learnApi.searchProgress(rowId).then(response => {
          console.log(response)
          const resp = response.data.data
          this.progress = resp.progress
          // if (resp.state === 'FAILURE') {
          //   this.progress = 0
          // } else if (resp.state === 'SUCCESS') {
          //   this.progress = resp.progress
          // } else if (resp.state === 'PENDING') {
          //   this.progress = 0
          // }
        })
      } else {
        this.$message.error('该学习器未进行训练')
      }
    },
    // 下载预测结果文件
    handleDownLoadPrediction (row) {
      console.log(row)
      if (row.train_state === '2') {
        learnApi.downloadPrediction(row.learner_id).then(response => {
          console.log(response)
          const url = window.URL.createObjectURL(new Blob([response.data], { type: response.headers['content-type'] }))
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', row.dataset_id + 'predicition' + '.csv')
          document.body.appendChild(link)
          link.click()
        // const resp = response.data
        })
      } else {
        return this.$message.error('未训练完成，不能下载')
      }
    },
    // 下载预测报告文件
    handleDownLoadReport (row) {
      console.log(row)
      if (row.train_state === '2') {
        learnApi.downloadReport(row.learner_id).then(response => {
          console.log(response)
          const url = window.URL.createObjectURL(new Blob([response.data], { type: response.headers['content-type'] }))
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', row.dataset_id + 'report' + '.csv')
          document.body.appendChild(link)
          link.click()
        // const resp = response.data
        })
      } else {
        return this.$message.error('未训练完成，不能下载')
      }
    },
    // 发送给父组件决策
    clickCurrentChange (currentRow) {
      this.$emit('learner-choose', currentRow)
    },
    // 删除按钮，删除数据集
    handleDelete (rowId) {
      // console.log(rowId)
      this.$confirm('此操作将永久删除该特征工程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        learnApi.deleteData(rowId).then(response => {
          this.$message.success('删除成功')
          this.getLearnerInfo()
        })
      }).catch(error => {
        this.$message.info('已取消删除')
        return error
      })
    }
  }
}
</script>
